import { fileURLToPath, URL } from 'node:url'; // Node.js 内置模块，用于将 URL 转换为文件路径
import { defineConfig } from 'vite'; // Vite 的配置方法，用于导出配置对象
import vue from '@vitejs/plugin-vue'; // Vite 的 Vue 插件，支持 Vue 单文件组件
import vueDevTools from 'vite-plugin-vue-devtools'; // Vue DevTools 插件，调试 Vue 应用的工具
import AutoImport from 'unplugin-auto-import/vite'; // 自动导入插件，减少手动 import 的工作
import Components from 'unplugin-vue-components/vite'; // 按需加载 Vue 组件插件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'; // Element Plus 的解析器，用于按需加载组件

// 导出 Vite 配置
export default defineConfig({
    // 配置开发服务器
    server: {
        proxy: {
            "/dev-api": {
                target: "http://127.0.0.1:19090/system", // 代理的目标地址，将 '/dev-api' 的请求转发到这里
                rewrite: (p) => p.replace(/^\/dev-api/, ""), // 路径重写，移除 '/dev-api' 前缀，转发给目标地址
            },
        },
    },

    // 配置模块解析规则
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url)), // 配置路径别名 '@'，方便在项目中引用 'src' 目录下的文件
        },
    },

    // 配置插件
    plugins: [
        vue(),          // 启用 Vue 插件，支持 Vue 单文件组件的开发功能
        vueDevTools(),  // 启用 Vue DevTools 插件，便于调试 Vue 应用

        // 自动导入插件配置
        AutoImport({
            imports: ['vue', 'vue-router'], // 自动导入 Vue 和 Vue Router 的 API，如 ref、reactive、useRouter 等
            resolvers: [ElementPlusResolver()], // 配置 Element Plus 的解析器，自动导入相关 API
        }),

        // 组件自动导入插件配置
        Components({
            resolvers: [ElementPlusResolver()], // 配置 Element Plus 的解析器，按需自动导入其组件
        }),
    ]
});
